<template>
  <div>
    <div class="banner" @click="showgallary">
      <div>
        <img :src="bannerimg" alt="" />
      </div>

      <div class="info">
        <div class="title">{{ sightname }}</div>
        <div class="number">
          <span class="iconfont">&#xe64d; </span>
          {{ bannergallary.length }}
        </div>
      </div>
    </div>
    <fade-animation>
      <gallary
        v-show="flag"
        @close="closegallary"
        :bannergallary="bannergallary"
      >
      </gallary>
    </fade-animation>
  </div>
</template>

<script>
import FadeAnimation from '@/common/FadeAnimation'
import Gallary from "@/common/Gallary"
export default {
  name: "DetailBanner",
  components: {
      Gallary,
      FadeAnimation
  },
  props: {
    sightname: String,
    bannerimg: String,
    bannergallary: Array
  },
  data() {
      return {
          flag: false
      }
  },
  methods: {
      showgallary() {
          this.flag = true
      },
      closegallary() {
          this.flag = false
      }
  }
};
</script>

<style scoped>
.banner {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 55%;
  background: #eee;
}
img {
  width: 100%;
}
.info {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 0.6rem;
  color: #eee;
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.title {
  flex: 1;
  padding: 0 0.2rem;
}
.number {
  margin-top: 0.1rem;
  padding: 0 0.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.4);
}
</style>